10

刚才看了下一个 JS 新特性——「Optional Chaining」,这是干啥用的呢?

过去在 Object 属性链的调用中,很容易因为某个属性不存在而导致之后出现Cannot read property xxx of undefined的错误。

const obj = {
    qwe: {
        asd: {
            zxc: '666'
        }
    }
}

console.log(obj.qwe.asd.zxc); // 666
console.log(obj.abc.def.ghi); // Uncaught TypeError: Cannot read property 'def' of undefined...

那 optional chaining 就是添加了?.这么个操作符,它会先判断前面的值,如果是 null 或 undefined,就结束调用、返回 undefined。

console.log(obj?.abc?.def?.ghi); // undefined

要注意操作符是?.,而不是单独的。因此,如果属性链中取某个 Array 的元素,应该是obj?.qwe?.arr?.[0]。类似的,如果需要取属性链中某函数并执行,就应该是obj?.qwe?.func?.()

这个特性可以说是非常实用了,不过它现在处于 stage-1 阶段,估计进入标准还有段时间。不过 Babel v7 beta 已经添加了此特性的插件,想现在用起来的同学可以安装起来。

Reference


Haohong
600 声望15 粉丝